<template>
	<div
		:data-theme="theme"
		class="store-home productSort"
		:style="{ 'background-image': `linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%),url(${merchantInfo.backImage})` }"
	>
		<tui-skeleton v-if="skeletonShow"></tui-skeleton>
		<view class="sys-head skeleton-rect" :style="{ height: statusBarHeight }"></view>
		<view class="fixed-top">
			<view class="navbarCon acea-row" :style="{ paddingRight: navbarRight + 'px', width: leftWindowWidth + 'px' }">
				<view class="select_nav acea-row row-around tui-skeleton-rect homeBox" id="home" ref="selectNav">
					<text class="iconfont icon-fanhui2" @tap="returns"></text>
					<text class="nav_line"></text>
					<text class="iconfont icon-shouye4" @tap="goIndex"></text>
				</view>

				<navigator
					:url="'/pages/goods/goods_list/index?merId=' + merid"
					class="input tui-skeleton-rect searchIpt"
					hover-class="none"
					:style="{ top: homeTop + 'rpx', width: searchIptWindowWidth + 'px' }"
				>
					<text class="iconfont icon-xiazai5"></text>
					输入商品名称搜索
				</navigator>
			</view>
		</view>

		<view v-if="navShow && tabActive === 0" class="nav acea-row">
			<view class="nav-cont">
				<view :class="{ active: navActive === 0 }" class="item" @click="set_where(1)">
					<view class="cont">默认</view>
				</view>
				<view :class="{ active: navActive === 1 }" class="item" @click="set_where(2)">
					<view class="cont">
						价格
						<image v-if="price == 1" :src="upPng"></image>
						<image v-else-if="price == 2" :src="downPng"></image>
						<image v-else :src="urlDomain + 'crmebimage/presets/horn.png'"></image>
					</view>
				</view>
				<view :class="{ active: navActive === 2 }" class="item" @click="set_where(3)">
					<view class="cont">
						销量
						<image v-if="stock == 1" :src="upPng"></image>
						<image v-else-if="stock == 2" :src="downPng"></image>
						<image v-else :src="urlDomain + 'crmebimage/presets/horn.png'"></image>
					</view>
				</view>
			</view>
			<view
				class="item"
				@click="
					navActive = 3;
					isColumn = !isColumn;
				"
				style="margin-left: 80rpx"
			>
				<view class="conts">
					<text :class="['layout-icon', 'iconfont', isColumn ? 'icon-pailie' : 'icon-tupianpailie']"></text>
				</view>
			</view>
		</view>

		<scroll-view class="main" scroll-y="true" @scroll="scrollHome">
			<merHome class="tui-skeleton-rect" :merchantInfo="merchantInfo" :merid="merid" type="detail" @merHomeHeight="merHomeHeight"></merHome>
			<view v-if="!navShow && tabActive === 0" class="nav acea-row">
				<view class="nav-cont">
					<view :class="{ active: navActive === 0 }" class="item" @click="set_where(1)">
						<view class="cont tui-skeleton-rect">默认</view>
					</view>
					<view :class="{ active: navActive === 1 }" class="item" @click="set_where(2)">
						<view class="cont tui-skeleton-rect">
							价格
							<image v-if="price == 1" :src="upPng"></image>
							<image v-else-if="price == 2" :src="downPng"></image>
							<image v-else :src="urlDomain + 'crmebimage/presets/horn.png'"></image>
						</view>
					</view>
					<view :class="{ active: navActive === 2 }" class="item" @click="set_where(3)">
						<view class="cont tui-skeleton-rect">
							销量
							<image v-if="stock == 1" :src="upPng"></image>
							<image v-else-if="stock == 2" :src="downPng"></image>
							<image v-else :src="urlDomain + 'crmebimage/presets/horn.png'"></image>
						</view>
					</view>
				</view>
				<view
					class="item"
					@click="
						navActive = 3;
						isColumn = !isColumn;
					"
					style="margin-left: 80rpx"
				>
					<view class="conts tui-skeleton-rect">
						<text :class="['layout-icon', 'iconfont', isColumn ? 'icon-pailie' : 'icon-tupianpailie']"></text>
					</view>
				</view>
			</view>
			<view class="tab-cont">
				<!-- 商品 -->
				<view v-show="tabActive === 0" class="productList">
					<view v-if="productList.length" id="goods" @touchmove="onTouchmove">
						<view v-if="!isColumn" class="list acea-row row-between-wrapper" :class="isColumn == true ? '' : 'on'">
							<view class="item" :class="isColumn == true ? '' : 'on'" hover-class="none" v-for="(item, index) in productList" :key="index" @click="godDetail(item)">
								<view class="proPic" :class="isColumn == true ? '' : 'on'">
									<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
									<view v-if="item.activityStyle" :style="{ backgroundImage: `url(${item.activityStyle})` }" class="border-picture"></view>
								</view>
								<view class="text" :class="isColumn == true ? '' : 'on'">
									<view class="name line2">
										<span v-if="item.productTags && item.productTags.locationLeftTitle.length" class="mr10 bg-color merType">
											{{ item.productTags.locationLeftTitle[0].tagName }}
										</span>
										{{ item.name }}
									</view>
									<view v-if="item.productTags && item.productTags.locationUnderTitle.length">
										<text
											v-for="items in item.productTags.locationUnderTitle.length > 3 ? item.productTags.locationUnderTitle.slice(0, 3) : item.productTags.locationUnderTitle"
											:key="items.id"
											class="mr10 tagSolid"
										>
											{{ items.tagName }}
										</text>
									</view>
									<view class="money" :class="isColumn == true ? '' : 'on'">
										<svip-price :svipIconStyle="svipIconStyle" :productPrice="item" :svipPriceStyle="svipPriceStyle"></svip-price>
										<!-- 	<text class='num'>￥{{item.price}}</text> -->
										<view class="sold">
											<text v-if="Math.floor(item.replyNum) > 0">{{ item.replyNum }}条评论</text>
											<text v-else class="m-l-8">暂无评论</text>
											<text v-if="Number(item.positiveRatio) > 0" class="m-l-8">好评{{ $util.$h.Mul(item.positiveRatio, 100) }}%</text>
										</view>
										<text class="buyed m-l-8">{{ `已售${item.sales}${item.unitName}` }}</text>
									</view>
								</view>
							</view>
						</view>
						<view v-else class="goods">
							<WaterfallsFlow :wfList="productList" :type="1">
								<template slot-scope="{ item }">
									<WaterfallsFlowItem :item="item" :type="1" :isStore="1" />
								</template>
							</WaterfallsFlow>
						</view>
					</view>
					<view class="loadingicon acea-row row-center-wrapper">
						<text class="loading iconfont icon-jiazai" :hidden="goodsLoading == false"></text>
						{{ productList.length ? loadTitle : '' }}
					</view>
					<emptyPage v-if="productList.length == 0 && !goodsLoading" mTop="35%" title="暂无商品~" :imgSrc="urlDomain + 'crmebimage/presets/noShopper.png'"></emptyPage>
				</view>
				<!-- 分类 -->
				<view v-show="tabActive === 1">
					<view class="category">
						<view v-for="item in category" :key="item.id" class="section">
							<view class="head" @click="goCategoryGoods(item)">
								<view class="title">{{ item.name }}</view>
								<view class="iconfont icon-xiangyou"></view>
							</view>
							<view v-if="item.childList" class="body">
								<view v-for="value in item.childList" :key="value.id" class="item" @click="goCategoryGoods(value)">{{ value.name }}</view>
							</view>
						</view>
					</view>
					<view :hidden="!categoryLoading" class="acea-row row-center-wrapper loadingicon">
						<text class="iconfont icon-jiazai loading"></text>
						{{ category.length ? loadTitle : '' }}
					</view>
					<emptyPage v-if="category.length == 0 && !categoryLoading" mTop="35%" title="暂无商品分类~" :imgSrc="urlDomain + 'crmebimage/presets/noSearch.png'"></emptyPage>
				</view>

				<!-- 优惠券 -->
				<view v-show="tabActive === 2" class="couponBox">
					<view class="acea-row row-around navCoupon">
						<template>
							<view v-for="(item, index) in navList" :key="index" :class="['acea-row', 'row-middle', type === item.type ? 'on' : '']">
								<text @click="setType(item.type)">{{ item.name }}</text>
							</view>
						</template>
					</view>
					<view v-if="couponsList.length" class="coupon coupon-list">
						<view v-for="item in couponsList" :key="item.id" class="item">
							<!-- :class="{gary:item.isUse}" -->
							<view class="left main_bg">
								<view class="money">
									<text>￥{{ item.money }}</text>
									<view class="pic-num" v-if="parseFloat(item.minPrice) > 0">满{{ item.minPrice ? Number(item.minPrice) : '' }}可用</view>
								</view>
							</view>
							<view class="right">
								<view class="name line2">
									<text>{{ item.category === 1 ? '商家券' : '商品券' }}</text>

									{{ item.name }}
								</view>
								<view class="time-wrap" style="justify-content: space-between">
									<block v-if="item.isFixedTime">
										<view class="time">{{ item.useStartTimeStr | dateFormat }}-{{ item.useEndTimeStr | dateFormat }}</view>
									</block>
									<block v-else>
										<view>{{ '领取后' + item.day + '天内可用' }}</view>
									</block>
									<block v-if="item.isUse">
										<view class="getgray iconfont icon-yilingqu1"></view>
									</block>
									<block v-else>
										<view class="button" @click="receiveCoupon(item)">领取</view>
									</block>
								</view>
							</view>
						</view>
					</view>
					<view class="loadingicon acea-row row-center-wrapper">
						<text class="loading iconfont icon-jiazai" :hidden="loadingcoupon == false"></text>
						{{ couponsList.length ? loadTitle : '' }}
					</view>
					<emptyPage v-if="couponsList.length == 0 && !loadingcoupon" title="暂无可用优惠券~" :imgSrc="urlDomain + 'crmebimage/presets/noCoupon.png'"></emptyPage>
				</view>
			</view>
		</scroll-view>

		<view class="footer">
			<view v-for="(item, index) in tabs" :key="index" :class="{ active: tabActive === index }" class="item" @click="tab(index)">
				<view :class="['iconfont', item.icon]"></view>
				<view>{{ item.name }}</view>
			</view>
			<view class="item" @click="call">
				<view class="iconfont icon-kefu_o"></view>
				<view>联系客服</view>
			</view>
		</view>
	</div>
</template>

<script>
import { getMerCategoryApi, getMerDetailApi, getMerCollectAddApi, getMerCollectCancelApi, getMerIndexInfoApi, getMerProListApi } from '@/api/merchant.js';
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue';
import WaterfallsFlowItem from '@/components/WaterfallsFlowItem/WaterfallsFlowItem.vue';
import svipPrice from '@/components/svipPrice.vue';
import { mapGetters } from 'vuex';
import { getCoupons, setCouponReceive } from '@/api/api.js';
import { toLogin } from '@/libs/login.js';
import emptyPage from '@/components/emptyPage.vue';
import Cache from '@/utils/cache';
import merHome from '@/components/merHome/index.vue';
import { goShopDetail } from '@/libs/order.js';
import { chatConfig } from '@/utils/consumerType.js';
import tuiSkeleton from '@/components/base/tui-skeleton.vue';
import easyLoadimage from '@/components/base/easy-loadimage.vue';
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
let app = getApp();
export default {
	components: {
		WaterfallsFlow,
		emptyPage,
		merHome,
		tuiSkeleton,
		easyLoadimage,
		WaterfallsFlowItem,
		svipPrice
	},
	computed: {
		...mapGetters(['merchantClassify', 'merchantType', 'isLogin', 'uid'])
	},
	// 滚动监听
	onPageScroll(e) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		uni.$emit('scroll');
	},
	data() {
		return {
			//普通价格
			svipPriceStyle: {
				svipBox: {
					height: '26rpx',
					borderRadius: '12rpx 56rpx 56rpx 20rpx'
				},
				icon: {
					height: '26rpx',
					fontSize: '18rpx',
					borderRadius: '12rpx 0 12rpx 2rpx'
				},
				price: {
					fontSize: '38rpx'
				},
				svipPrice: {
					fontSize: '22rpx'
				}
			},
			//svip价格
			svipIconStyle: {
				svipBox: {
					height: '26rpx',
					borderRadius: '24rpx 40rpx 40rpx 0.4rpx'
				},
				price: {
					fontSize: '38rpx'
				},
				svipPrice: {
					fontSize: '18rpx'
				}
			},
			urlDomain: this.$Cache.get('imgHost'),
			statusBarHeight: 0,
			navList: [
				{
					type: 1,
					name: '商家券',
					count: 0
				},
				{
					type: 2,
					name: '商品券',
					count: 0
				}
			],
			type: 1,
			mer_banner: '../images/store.png',
			couponsList: [],
			loadTitle: '加载更多',
			categoryLoading: false,
			category: [],
			// 底部菜单
			tabs: [
				{
					icon: 'icon-yizhan_o',
					name: '首页'
				},
				{
					icon: 'icon-yingyongAPP_o',
					name: '分类'
				},
				{
					icon: 'icon-huobiliu_o',
					name: '领券'
				}
			],
			productList: [],
			scrollTop: 0,
			merchantInfo: {},
			sortPrice: '',
			skeletonShow: true, //骨架屏显示隐藏
			navShow: false,
			navActive: 0,
			tabActive: 0, // 底部切换
			isColumn: true, // 商品列表排列方式
			stock: 0,
			merid: 0,
			price: 0,
			where: {
				keyword: '',
				priceOrder: '',
				salesOrder: '',
				page: 1,
				limit: 10,
				cid: 0,
				merId: 0
			},
			loading: false,
			loadend: false,
			goodsLoading: false,
			loadendcoupon: false,
			loadingcoupon: false,
			page: 1,
			limit: 10,
			homeTop: 20,
			navbarRight: 0,
			theme: app.globalData.theme,
			upPng: '',
			downPng: '',
			storeHeight: 0, //商户信息高度
			rightSafeArea: 0, // 微信小程序右上角的胶囊菜单宽度
			leftWindowWidth: 0, //小程序头部左侧除去右上角的胶囊菜单宽度的长度
			searchIptWindowWidth: 0 //小程序端搜索框长度
		};
	},
	watch: {
		tabActive: function (value, old) {
			switch (value) {
				case 0:
					this.getGoods();
					break;
				case 1:
					if (this.service_open) {
						this.get_service_list();
					}
					break;
				case 2:
					this.getCoupon();
					break;
			}
		}
	},
	onShow() {
		// #ifdef MP || APP-PLUS
		this.statusBarHeight = statusBarHeight;
		// #endif
		// #ifdef H5
		this.statusBarHeight = 20;
		// #endif
	},

	created() {
		// #ifdef MP
		// 获取窗口信息
		const windowInfo = uni.getWindowInfo();
		// 获取胶囊左边界坐标
		this.leftWindowWidth = uni.getMenuButtonBoundingClientRect().left;
		const query = uni.createSelectorQuery().in(this);
		const homeWidth = 0;
		//搜索框宽度
		query
			.select('#home')
			.boundingClientRect((data) => {
				this.searchIptWindowWidth = this.leftWindowWidth - data.width - 50;
			})
			.exec();
		// #endif
	},
	onLoad(options) {
		this.downPng = `${this.urlDomain}crmebimage/presets/down_red.png`;
		this.upPng = `${this.urlDomain}crmebimage/presets/up_red.png`;
		this.merid = parseInt(options.id);
		// #ifdef MP || APP-PLUS
		this.statusBarHeight = statusBarHeight;
		// #endif
		// #ifdef H5
		this.statusBarHeight = 20;
		// #endif
		switch (this.theme) {
			case 'theme2':
				this.upPng = `${this.urlDomain}crmebimage/presets/up_orange.png`;
				this.downPng = `${this.urlDomain}crmebimage/presets/down_orange.png`;
				break;
			case 'theme3':
				this.upPng = `${this.urlDomain}crmebimage/presets/up_green.png`;
				this.downPng = `${this.urlDomain}crmebimage/presets/down_green.png`;
				break;
			case 'theme4':
				this.upPng = `${this.urlDomain}crmebimage/presets/up_blue.png`;
				this.downPng = `${this.urlDomain}crmebimage/presets/down_blue.png`;
				break;
			case 'theme5':
				this.upPng = `${this.urlDomain}crmebimage/presets/up_pink.png`;
				this.downPng = `${this.urlDomain}crmebimage/presets/down_pink.png`;
				break;
			default:
				this.upPng = `${this.urlDomain}crmebimage/presets/up_red.png`;
				this.downPng = `${this.urlDomain}crmebimage/presets/down_red.png`;
				break;
		}
	},
	mounted: function () {
		// #ifdef MP || APP-PLUS
		this.statusBarHeight = statusBarHeight;
		// #endif
		// #ifdef H5
		this.statusBarHeight = 20;
		// #endif
		this.$store.dispatch('MerTypeList');
		this.getMerIndexInfo();
		this.getGoods();
		this.getMerCategory();
	},
	methods: {
		//头部商户信息高度
		merHomeHeight(e) {
			this.storeHeight = e;
		},
		goIndex() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		// 后退
		returns: function () {
			uni.navigateBack();
		},
		// 领取优惠券
		receiveCoupon(item) {
			let that = this;
			if (that.isLogin === false) {
				toLogin();
			} else {
				uni.showLoading({
					title: '加载中...'
				});

				setCouponReceive(item.id)
					.then((res) => {
						uni.showToast({
							title: '领取成功',
							icon: 'none'
						});
						uni.hideLoading();
						item.isUse = !item.isUse;
					})
					.catch((err) => {
						uni.showToast({
							title: err,
							icon: 'none'
						});
						uni.hideLoading();
					});
			}
		},
		setType: function (type) {
			if (this.type !== type) {
				this.type = type;
				this.couponsList = [];
				this.page = 1;
				this.loadendcoupon = false;
				this.getCoupon();
			}
		},
		onTouchmove(e) {
			if (this.loadend) return;
			if (this.loading) return;
			if (this.goodsLoading) return;
			const query = uni.createSelectorQuery().in(this);
			query
				.select('#goods')
				.boundingClientRect((data) => {
					if (data.bottom < 1500 && data.top < 0) {
						this.getGoods();
					}
				})
				.exec();
			// 模拟触底刷新
		},
		getMerIndexInfo() {
			let that = this;
			getMerIndexInfoApi(this.merid)
				.then((res) => {
					this.merchantInfo = res.data;
					uni.setNavigationBarTitle({
						title: res.data.name
					});
					this.$store.commit('MERCHANTJINFO', res.data);
					this.skeletonShow = false;
				})
				.catch((err) => {
					that.loading = false;
					that.loadTitle = '加载更多';
					this.skeletonShow = false;
				});
		},
		getMerCategory() {
			getMerCategoryApi(this.merid)
				.then((res) => {
					this.category = res.data;
				})
				.catch((err) => {
					return this.$util.Tips({
						title: err
					});
				});
		},
		goCategoryGoods(item) {
			uni.navigateTo({
				url: '/pages/goods/goods_list/index?merId=' + this.merid + '&cid=' + item.id
			});
		},
		// 去详情页
		godDetail(item) {
			goShopDetail(item.id);
		},
		// 获取商铺优惠券
		getCoupon: function () {
			let that = this;
			if (that.loadendcoupon) return false;
			if (that.loadingcoupon) return false;
			that.loadingcoupon = true;
			getCoupons({
				page: that.page,
				limit: that.limit,
				category: this.type,
				merId: this.merid
			})
				.then((res) => {
					let list = res.data.list,
						loadend = list.length < that.limit;
					let couponsList = that.$util.SplitArray(list, that.couponsList);
					that.$set(that, 'couponsList', couponsList);
					that.loadendcoupon = loadend;
					that.loadTitle = loadend ? '我也是有底线的' : '显示更多';
					that.page = that.page + 1;
					that.loadingcoupon = false;
					that.isShow = true;
				})
				.catch((err) => {
					that.loadingcoupon = false;
					that.loadTitle = '显示更多';
				});
		},
		// 选择条件展示商品
		set_where: function (param) {
			this.clear();
			switch (param) {
				case 1:
					this.price = 0;
					this.stock = 0;
					this.navActive = 0;
					break;
				case 2:
					if (this.price == 0) this.price = 1;
					else if (this.price == 1) this.price = 2;
					else if (this.price == 2) this.price = 1;
					this.stock = 0;
					this.navActive = 1;
					break;
				case 3:
					if (this.stock == 0) this.stock = 1;
					else if (this.stock == 1) this.stock = 2;
					else if (this.stock == 2) this.stock = 1;
					this.price = 0;
					this.navActive = 2;
					break;
				case 4:
					this.price = 0;
					this.stock = 0;
					this.navActive = 3;
					break;
			}
			this.getGoods();
		},
		clear() {
			this.loading = false;
			this.loadend = false;
			this.where = {
				keyword: '',
				priceOrder: '',
				salesOrder: '',
				page: 1,
				limit: 20,
				cid: 0
			};
			this.productList = [];
		},
		getGoods() {
			let that = this;
			if (that.loadend) return;
			if (that.goodsLoading) return;
			that.goodsLoading = true;
			this.where.merId = this.merid;
			if (this.price == 0) this.where.priceOrder = '';
			else if (this.price == 1) this.where.priceOrder = 'asc';
			else if (this.price == 2) this.where.priceOrder = 'desc';
			if (this.stock == 0) this.where.salesOrder = '';
			else if (this.stock == 1) this.where.salesOrder = 'asc';
			else if (this.stock == 2) this.where.salesOrder = 'desc';
			that.loadTitle = '';
			getMerProListApi(that.where)
				.then((res) => {
					let list = res.data.list;
					let goodsList = that.$util.SplitArray(list, that.productList);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.goodsLoading = false;
					that.loadTitle = loadend ? '我也是有底线的' : '显示更多';
					that.$set(that, 'productList', goodsList);
					that.$set(that.where, 'page', that.where.page + 1);
				})
				.catch((err) => {
					that.goodsLoading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					});
					setTimeout(function () {
						//uni.navigateBack()
					}, 1000);
				});
		},
		// 商铺底部切换
		tab: function (param) {
			this.tabActive = param;
		},
		//客服跳转
		call: function () {
			chatConfig(this.merchantInfo);
		},
		stickyChange: function (e) {
			let index = e.index;
			this.lists[index].stickyTop = e.top;
		},
		// 商铺首页滚动 navbar 吸顶
		scrollHome: function (e) {
			uni.$emit('scroll');
			this.navShow = e.detail.scrollTop >= this.storeHeight - 20;
		},
		search() {
			uni.navigateTo({
				url: '/pages/goods/goods_list/index?merId=' + this.merid
			});
		},
		returns() {
			uni.navigateBack();
		}
	},
	onPullDownRefresh() {
		// 模拟上拉刷新
		setTimeout(() => {
			const newList = this.productList.reverse();
			this.productList = newList;
			uni.stopPullDownRefresh();
		}, 500);
	}
};
</script>

<style lang="scss" scoped>
.iconfont {
	font-size: 28rpx !important;
}

.select_nav {
	width: 140rpx;
	height: 54rpx;
	border-radius: 33rpx;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	font-size: 18px;
	line-height: 54rpx;
	align-items: center;
}

.px-20 {
	padding: 0 20rpx 0;
}

.nav_line {
	content: '';
	display: inline-block;
	width: 1px;
	height: 34rpx;
	background: #b3b3b3 !important;
	color: #b3b3b3 !important;
}

.navbarCon {
	padding: 10rpx 20rpx 0 20rpx;
	/* #ifdef H5 */
	width: 800rpx !important;
	// display: flex;
	/* #endif */
}

.h5_back {
	color: #fff;
	font-size: 32rpx;
	text-align: center;
	width: 140rpx;
	height: 54rpx;
	background: #3b3f41;
	border-radius: 27rpx;

	.iconfont {
		color: #fff;
	}
}

.input {
	display: flex;
	align-items: center;
	/* #ifdef MP */
	//width: 42%;
	/* #endif */
	/* #ifndef MP */
	width: 538rpx;
	/* #endif */
	height: 55rpx;
	padding: 0 0 0 30rpx;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 33rpx;
	color: #d9d9d9;
	font-size: 26rpx;
	// margin: auto;
	background: rgba(255, 255, 255, 0.3);
	margin-left: 20rpx;

	.iconfont {
		margin-right: 20rpx;
		font-size: 26rpx;
		color: #d9d9d9;
	}
}

.main_bg {
	@include main_bg_color(theme);
}

.select {
	@include main_color(theme);
	@include coupons_border_color(theme);
}

.sold {
	font-size: 20rpx;
	color: #888888;
}

.navCoupon {
	width: 100%;
	height: 76rpx;
	color: #999999;
	background-color: #fff;
}

.navCoupon .acea-row {
	border-top: 5rpx solid transparent;
	border-bottom: 5rpx solid transparent;
	cursor: pointer;
}

.navCoupon .acea-row.on {
	@include tab_border_bottom(theme);
	@include main_color(theme);
}

.tab-cont {
	background: #f5f5f5;
	min-height: 500rpx;
}

.couponBox {
	/deep/.empty-box {
		padding-top: 200rpx;
		margin-top: 0 !important;
	}
}

.main {
	flex: 1;
	min-height: 0rpx;
	height: calc(100vh - var(--window-top)); //calc()是动态计算函数

	/deep/.store {
		padding: 0 24rpx 24rpx 24rpx;
	}

	/deep/.noCheck {
		color: #666;
	}

	/deep/.pictrue {
		width: 74rpx;
		height: 74rpx;
		border-radius: 6rpx;
		overflow: hidden;
	}
}

.font-bg-red {
	padding: 4rpx;
	@include main_bg_color(theme);
	color: #fff;
	font-size: 18rpx;
	display: inline-block;
	border-radius: 4rpx;
}

.goods {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 20rpx;
	padding-left: 24rpx;
	background-color: #f5f5f5;
	width: 100%;
}

.coupon-list {
	margin-top: 0;

	.right {
		position: relative;
		overflow: hidden;
	}
}

.coupon {
	padding: 24rpx;
	background-color: #f5f5f5;

	.item {
		display: flex;
		margin-bottom: 16rpx;

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 240rpx;
			font-weight: 500;
			font-size: 24rpx;
			line-height: 1;
			color: #ffffff;

			&.gary {
				background-image: url('');
			}

			.money {
				text {
					margin-left: 10rpx;
					font-size: 60rpx;
				}
			}
		}

		.right {
			flex: 1;
			min-width: 0;
			padding: 0 20rpx;
			background-color: #ffffff;

			.name {
				border-bottom: 1rpx solid #f0f0f0;
				font-weight: 500;
				height: 115rpx;
				font-size: 30;
				line-height: 46rpx;
				color: #282828;
				padding: 15rpx 0;

				text {
					display: inline-block;
					// width: 84rpx;
					// height: 28rpx;
					padding: 0 10rpx;
					border-radius: 14rpx;
					margin-right: 15rpx;
					background-color: #fff4f3;
					font-weight: 500;
					font-size: 20rpx;
					line-height: 26rpx;
					text-align: center;
					@include main_color(theme);
					@include coupons_border_color(theme);

					&.gary {
						border-color: #bbb;
						color: #bbb;
						background-color: #f5f5f5;
					}
				}
			}

			.time-wrap {
				display: flex;
				align-items: center;
				padding-top: 16rpx;
				padding-bottom: 16rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;

				.time {
					flex: 1;
					min-width: 0;
				}

				.button {
					width: 136rpx;
					height: 44rpx;
					border-radius: 22rpx;
					@include main_bg_color(theme);
					font-weight: 500;
					font-size: 22rpx;
					line-height: 44rpx;
					text-align: center;
					color: #ffffff;

					&.gary {
						background-color: #999;
					}
				}
			}
		}
	}

	.disabled {
		.left {
			background-image: url(../static/images/coupon2.png);
		}

		.right {
			.name {
				text {
					border-color: #c1c1c1;
					color: #c1c1c1;
				}
			}

			.time-wrap {
				.button {
					background-color: #cccccc;
					color: #ffffff;
				}
			}
		}
	}
}

.category {
	padding-top: 34rpx;
	padding-right: 20rpx;
	padding-left: 20rpx;

	.section {
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff;

		.head {
			position: relative;
			display: flex;
			align-items: center;
			height: 90rpx;
			padding-right: 20rpx;
			padding-left: 36rpx;
			font-weight: bold;
			color: #282828;

			&::before {
				content: ' ';
				position: absolute;
				top: 50%;
				left: 20rpx;
				width: 6rpx;
				height: 24rpx;
				@include main_bg_color(theme);
				transform: translateY(-50%);
			}

			.title {
				flex: 1;
				min-width: 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 30rpx;
			}

			.iconfont {
				font-size: 22rpx;
				line-height: 1;
			}
		}

		.body {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			padding: 9rpx 36rpx 14rpx;

			.item {
				width: 314rpx;
				height: 84rpx;
				padding-right: 30rpx;
				padding-left: 30rpx;
				border-radius: 10rpx;
				background-color: #f5f5f5;
				margin-bottom: 10rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-weight: 500;
				font-size: 26rpx;
				line-height: 84rpx;
				color: #282828;
			}
		}
	}
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	display: flex;
	width: 100%;
	padding-top: 12rpx;
	padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
	padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
	background-color: #ffffff;
	opacity: 0.96;

	.item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 20rpx;
		color: #282828;

		.iconfont {
			font-size: 43rpx !important;
		}
	}

	.active {
		@include main_color(theme);
	}
}

.productList {
	background: #f5f5f5;
}

.productList .list.on {
	border-radius: 14rpx;
	margin-top: 0 !important;
	background-color: #fff;
	padding: 40rpx 0 0 0;
}

.productList .list .item {
	width: 335rpx;
	background-color: #fff;
	border-radius: 14rpx;
	margin-bottom: 20rpx;
}

.productList .list.item {
	&::before {
		content: ' ';
		position: absolute;
		top: 0;
		right: 10px;
		left: 125px;
		border-top: 0.5px solid #f5f5f5;
	}
}

.productList .list .item.on {
	width: 100%;
	display: flex;
	padding: 0 24rpx 50rpx 24rpx;
	margin: 0;
	border-radius: 14rpx;
	overflow: hidden;
}

.productList .list .item .proPic,
/deep/.easy-loadimage,
uni-image {
	position: relative;
}

.productList .list .item .proPic.on /deep/.easy-loadimage,
uni-image uni-image {
	width: 240rpx;
	height: 240rpx;
	border-radius: 14rpx;
	overflow: hidden;
}

.productList .list .item .proPic image.on {
	border-radius: 6rpx;
	overflow: hidden;
}

.productList .list .item .text.on {
	width: 456rpx;
	padding: 0 0 0 20rpx;
	position: relative;

	&::after {
		content: '';
		display: block;
		width: 94%;
		border-bottom: 1rpx solid #f6f6f6;
		position: absolute;
		right: 2rpx;
		bottom: -24rpx;
	}
}

.productList .list .item .text .name {
	font-size: 28rpx;
	font-weight: bold;
	margin-top: 8rpx;
	color: #333333;
	margin-bottom: 30rpx;
}

.productList .list .item .text .money.on {
	//margin-top: 80rpx;
}

.productList .list .item .text .money .num {
	font-size: 38rpx;
	font-weight: 900;
	@include price_color(theme);
}

.productList .list .item .text .y-money {
	font-size: 26rpx;
	color: #888888;
	text-decoration: line-through;
	margin-left: 14rpx;
}

.store-home-top {
	width: 100%;
	height: 360rpx;
	position: relative;
}

.store-home {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	padding-bottom: 100rpx;
	background: left top/750rpx 390rpx no-repeat fixed;
	overflow: hidden;
}

.fixed-top {
	top: 0;
	left: 0;
	z-index: 9;
	margin-bottom: 24rpx;
}

.nav.fixed {
	position: fixed;
	left: 0;
	width: 100%;
	display: flex;

	.nav-cont {
		position: absolute;
		width: 80%;
		justify-content: space-between;
	}
}

.nav {
	position: relative;
	padding: 0 30rpx;
	margin-bottom: 20rpx;

	.nav-cont {
		width: 80%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// height: 84rpx;
	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 0;

		.cont {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 12rpx;
			height: 44rpx;
			border-radius: 22rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #ffffff;

			.arrow-icon {
				margin-left: 10rpx;
				font-size: 18rpx;
			}

			.layout-icon {
				font-size: 32rpx;
			}

			.icon-pailie {
				font-size: 32rpx;
			}

			image {
				width: 15rpx;
				height: 21rpx;
				margin-left: 7rpx;
			}
		}
	}

	.active {
		.cont {
			background-color: #ffffff;
			font-weight: bold;
			@include main_color(theme);
		}
	}

	.select {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 2;
		width: 100%;
		padding-right: 40rpx;
		padding-bottom: 28rpx;
		padding-left: 74rpx;
		border-bottom-right-radius: 24rpx;
		border-bottom-left-radius: 24rpx;
		background-color: #ffffff;

		.item {
			margin-top: 28rpx;
			font-size: 24rpx;
			color: #454545;
		}

		.active {
			//background: url(../../../static/images/active.png) right center/20rpx no-repeat;
			color: #e93323;
		}
	}
}

.icon-dingbufanhui,
.icon-more {
	color: #fff;
}

.searchIpt {
	/* #ifdef H5 */
	width: 550rpx !important;
	height: 54rpx;
	line-height: 54rpx;
	/* #endif */
}

.productSort .header .input {
	width: 558rpx;
	height: 60rpx;
	background-color: #3f4244;
	border-radius: 50rpx;
	box-sizing: border-box;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
}

.productSort .header .input .iconfont {
	font-size: 26rpx;
	color: #666;
}

.productSort .header .input .place {
	padding-left: 12rpx;
	color: #ccc;
	font-size: 26rpx;
}

.getgray {
	font-size: 134rpx !important;
	@include main_color(theme);
	position: absolute;
	right: -20rpx;
	bottom: -20rpx;
	opacity: 0.36;
}

.pic-num {
	font-size: 24rpx;
	margin-top: 10rpx;
}

.m-l-8 {
	margin-left: 8rpx;
}

.conts {
	color: #fff;
}
.buyed {
	font-size: 20rpx;
	color: #888888;
}
</style>
